<#escape x as x?html>
<form class="form-horizontal form-fusion" name="recordForm" id="recordForm" method="post" action="${actionType!}"
      enctype="multipart/form-data">
    <input type="text" class="hide"
           name="id" value="${(record.id)!}">
    <div class="form-group">
        <label class="col-sm-2 control-label" for="cnName"><span class="red-star"
                                                                 style="color:red;">*  </span>名称
        </label>
        <div class="col-sm-9">
            <input type="text" class="form-control" id="name"
                   name="name" placeholder="名称"
                   data-error="<@s.message "validator.error.require"/>" required
                   value="${(record.name)!}">
            <div class="help-block with-errors"></div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="bannerFile"><span class="red-star"
                                                                     style="color:red;">*  </span>横幅图片(1200px*340px)</label>
        <div class="col-sm-9">
            <input type="file" id="bannerFile" name="bannerFile" data-error="<@s.message "validator.error.require"/>"
                   required>
            <div class="help-block with-errors"></div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="sort"><span class="red-star"
                                                               style="color:red;">*  </span>排序</label>
        <div class="col-sm-9">
            <input type="text" class="form-control"
                   name="sort" placeholder="排序"
                   pattern="^[1-9]\d*$" data-error="<@s.message "validator.error.positiveInteger"/>" required
                   value="${(record.sort)!}">
            <div class="help-block with-errors"></div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="applications">相关应用</label>
        <div class="col-sm-9">
            <input type="text" class="hide"
                   name="applications"
                   value="<#if record??><#list record.applications as app>${app},</#list></#if>">
            <div class="application-tree fancytree-form"></div>
        </div>
    </div>
</form>
<script>
    context.call([
        "core",
        "jQueryFancyTree"
    ], function (core) {
        var id = $("input[name='id']").val();
        if (id == "") id = 0;
        $(".application-tree").fancytree({
            checkbox: true,
            selectMode: 3,
            minExpandLevel: 3,
            source: {
                url: "/sys/appView/getBannerApplicationTree?id=" + id,
                debugDelay: 100
            },
            icon: function (event, data) {
                if (core.isEmpty(data.node.children)) {
                    return "fa fa-cog";
                } else {
                    return "fa fa-cogs";
                }
            },
            select: function (event, data) {
                var selKeys = $.map(data.tree.getSelectedNodes(), function (node) {
                    if (node.children) {
                        return null;
                    } else {
                        return node.key;
                    }
                });

                $("input[name='applications']").val(selKeys);
            }
        });

        if ($("#recordForm").attr("action") == "view")  $(".application-tree").fancytree("disable");
    })
</script>
<style>
    .application-tree .ui-fancytree {
        height: 300px;
        overflow: auto;
    }
</style>
</#escape>